<template>
    <!-- <div class="nav">
        <ul>
            <li v-for="item in 8"><a href="#">集团介绍</a></li>
        </ul>
    </div> -->
    <div class="nav">
        <div class="navcenter">
            <ul>
                <li v-for="item in navBar"><a href="#">{{ item }}</a></li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
const navBar=ref(['集团介绍','产品中心','卧龙市场','技术研发','国际合作','投资者关系','新闻资讯','人力资源'])
</script>

<style scoped lang="less">
// .nav{
//     background-color: black;
//     height:60px;
//     line-height: 60px;
//     ul{
//         display: flex;
//         list-style: none;
//         li{
//             flex:1;
//             text-align: center;
//             a{
//                 color: white;
//                 text-decoration: none;
//             }

//         }
//     }
// }
.nav{
    width: 1000px;
    height: 58px;
    margin: 0px auto;
    background-color:#2f2f2f;
}
a{
    color: white;
}
.navcenter{
    width: 1000px;
}
.navcenter ul li {
    height: 58px;
    float: left;
    margin-left: 30px;
    border-right: 1px solid white;
}
.navcenter ul li:last-child{
    border: none;
}
.navcenter ul li a{
    font-weight: bold;
    display: block;
    line-height: 58px;
    margin-right: 30px;
}
</style>